<!DOCTYPE html>
<html lang="zn-CH">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/favicon.ico"
        type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒优购</title>
    <!-- 引入icon字体 -->
    <link rel="stylesheet" type="text/css" href="../../public/css/icon-font.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../../public/elementUI/elementUI.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../../public/css/bascis.css">
    <link rel="stylesheet" type="text/css" href="../../public/css/animate.min.css">

    <script src="../../public/js/vue-lazyload.js"></script>
    <!-- 引入组件库 -->
    <script src="../../public/elementUI/elementUI.js"></script>
    <script src="../../public/js/axios.min.js"></script>

    <!-- 局部引入 -->
    <link rel="stylesheet" type="text/css" href="./index.css">


</head>

<body>
    <div id="app">
        <!-- header -->
        <header >
            <div class="center hd-context">
                <div v-show="isLogin">
                    <el-dropdown>
                        <div class="hd-avatar">
                            <el-avatar shape="square" :size="30" fit="fill" :src="userInfo.cusAvatar"></el-avatar>
                            <a>{{userInfo.cusNickname}}</a>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <p @click="getoCar()">购物车</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="gotoPersional()">个人中心</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="logout()">退出</p>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
                <div v-show="!isLogin"><a href="../login/login.html">登录</a></div>
                <div v-show="!isLogin"><a href="../login/login.html">注册</a></div>
                <div><a href="../invitation/invitation.html" target="_blank">店铺入驻</a></div>
            </div>

            <div class="ksd-deng-box">
                <div class="ksd-deng">
                    <div class="ksd-xian"></div>
                    <div class="ksd-deng-a">
                        <div class="ksd-deng-b">
                            <div class="ksd-deng-t">春</div>
                        </div>
                    </div>
                    <div class="ksd-shui ksd-shui-a">
                        <div class="ksd-shui-c"></div>
                        <div class="ksd-shui-b"></div>
                    </div>
                </div>
            </div>
            <div class="ksd-deng-box1">
                <div class="ksd-deng">
                    <div class="ksd-xian"></div>
                    <div class="ksd-deng-a">
                        <div class="ksd-deng-b">
                            <div class="ksd-deng-t">节</div>
                        </div>
                    </div>
                    <div class="ksd-shui ksd-shui-a">
                        <div class="ksd-shui-c"></div>
                        <div class="ksd-shui-b"></div>
                    </div>
                </div>
            </div>
            <div class="ksd-deng-box2">
                <div class="ksd-deng">
                    <div class="ksd-xian"></div>
                    <div class="ksd-deng-a">
                        <div class="ksd-deng-b">
                            <div class="ksd-deng-t">快</div>
                        </div>
                    </div>
                    <div class="ksd-shui ksd-shui-a">
                        <div class="ksd-shui-c"></div>
                        <div class="ksd-shui-b"></div>
                    </div>
                </div>
            </div>
            <div class="ksd-deng-box3">
                <div class="ksd-deng">
                    <div class="ksd-xian"></div>
                    <div class="ksd-deng-a">
                        <div class="ksd-deng-b">
                            <div class="ksd-deng-t">乐</div>
                        </div>
                    </div>
                    <div class="ksd-shui ksd-shui-a">
                        <div class="ksd-shui-c"></div>
                        <div class="ksd-shui-b"></div>
                    </div>
                </div>
            </div>
        </header>
        <!-- logo 和搜索框 -->
        <div class="logo-search">
            <div class="center ls-context">
                <div class="logo">
                    <el-image style="width: 160px; height: 80px" :src="logoUrl" fit="fill"></el-image>
                </div>
                <div class="search">
                    <div class="search-box animate__animated animate__fadeInDown ">
                        <input placeholder="搜索商品" type="text" v-on:keyup.enter="toSearch()" v-model="searchKey">
                        <i class="iconfont iconsousuo" @click="toSearch()"></i>
                    </div>
                </div>
            </div>
        </div>
        <!-- 轮播图  -->
        <div class=" carousel center">

            <el-carousel :interval="5000" arrow="never" style=" z-index: 1;  height: 522px; margin: 0 auto;">
                <el-carousel-item v-for="item in carouseList" :key="item.proId">
                    <div
                        style=" width: 100%; height: 522px; cursor: pointer; margin: 0 auto; display: flex; justify-content: center; ">
                        <image fit="fill" @click="toProInfo(item.proId)" :src="item.caroImg">
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 页面主体 -->
        <div class="mian-body center">
            <!-- 分类 -->
            <div class="category-bg" @mouseleave="isShow=false">
                <div class="category">
                    <ul>
                        <li @mouseover="mouseHandel(0)" :class="{'hover':categoryIndex===0&&isShow}">
                            <a><span>零食</span><i class="iconfont iconjiantouyou"></i></a></li>
                        <li @mouseover="mouseHandel(1)" :class="{'hover':categoryIndex===1&&isShow}">
                            <a><span>方便速食</span><i class="iconfont iconjiantouyou"></i></a></li>
                        <li @mouseover="mouseHandel(2)" :class="{'hover':categoryIndex===2&&isShow}">
                            <a><span>名酒</span><i class="iconfont iconjiantouyou"></i></a></li>
                        <li @mouseover="mouseHandel(3)" :class="{'hover':categoryIndex===3&&isShow}">
                            <a><span>乳饮冰</span><i class="iconfont iconjiantouyou"></i></a></li>
                        <li @mouseover="mouseHandel(4)" :class="{'hover':categoryIndex===4&&isShow}">
                            <a><span>水果</span><i class="iconfont iconjiantouyou"></i></a></li>
                        <li @mouseover="mouseHandel(5)" :class="{'hover':categoryIndex===5&&isShow}">
                            <a><span>肉类</span><i class="iconfont iconjiantouyou"></i></a></li>
                        <li @mouseover="mouseHandel(6)" :class="{'hover':categoryIndex===6&&isShow}">
                            <a><span>蛋类</span><i class="iconfont iconjiantouyou"></i></a></li>
                        <li @mouseover="mouseHandel(7)" :class="{'hover':categoryIndex===7&&isShow}">
                            <a><span>海鲜</span><i class="iconfont iconjiantouyou"></i></a></li>
                        <li @mouseover="mouseHandel(8)" :class="{'hover':categoryIndex===8&&isShow}">
                            <a><span>蔬菜</span><i class="iconfont iconjiantouyou"></i></a></li>
                    </ul>
                </div>
                <div class="category-right" v-if="isShow" @mouseover="isShow=true">
                    <div class="header">
                        <h1>{{category[categoryIndex].title}}</h1>
                        <a @click="toSearchClass(category[categoryIndex].classId)">全部{{category[categoryIndex].title}}<i
                                class="iconfont iconjiantouyou"></i></a>
                    </div>
                    <div class="top">
                        <ul>
                            <li v-for="(item , index) in category[categoryIndex].header"
                                @click="toSearchClass(parseInt(category[categoryIndex].classId)+(index+1))"
                                :style="{'background-color':categoryBg[categoryIndex]}"><a>{{item}}</a></li>
                        </ul>
                    </div>
                    <div class="bottom">
                        <ul>
                            <li v-for="(item , index) in category[categoryIndex].pro" :key="item.id"
                                @click="toProInfo(item.id)"><a>
                                    <img style=" width: 46px; height: 46px" :src="item.icon">
                                    <span>{{item.name}}</span>
                                </a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 广告位 -->
            <h1>
                <img src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/dian.png">
            </h1>
            <div class="floor">
                <ul>
                    <li><a href="../store/store.html?sid=1000029" target="_blank"><img  src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/img/maiyatang.png"></a>
                    </li>
                    <li><a href="../store/store.html?sid=1000030" target="_blank"><img  src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/img/miaomiao.png"></a>
                    </li>
                    <li><a href="../store/store.html?sid=1000010" target="_blank"><img   src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/img/ceshhi.png"></a>
                    </li>
                </ul>
            </div>
            <!-- 推广 -->
            <h1>
                <img src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/jiang.png">
            </h1>
            <div class="adv">
                <ul>
                    <li v-for="(item,index) in redProList" @click="toProInfo(item.proId)" :key="(item.proId+index)">
                        <a>
                            <img width="185px" height="185px" :src="item.proIcon">
                            <p class="pro-name">{{item.proTitle.substring(0,20)}}</p>
                            <span class="pro-peice">
                                <span class="old-price"><i>￥</i>{{item.proPrice}}</span>
                                <span class="new-price"><i>￥</i>{{item.proPrice-item.proDis}}</span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <h1>
                <img src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/tui.png">
            </h1>
            <div class="adv">
                <ul>
                    <li v-for="(item,index) in recProList" @click="toProInfo(item.proId)" :key="item.proId+index">
                        <a>
                            <img width="185px" height="185px" :src="item.proIcon">
                            <p class="pro-name">{{item.proTitle.substring(0,20)}}</p>
                            <span class="pro-peice">
                                <span class="new-price"><i>￥</i>{{item.proPrice}}</span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- foot -->
        <footer>

            <div class="center">
                <ul>
                    <li><i class="iconfont iconpinzhibaozhang"></i><span>品质保障</span></li>
                    <li><i class="iconfont icontianmaoqitiantuihuo"></i><span>七天无理由退货</span></li>
                    <li><i class="iconfont icontesefuwu"></i><span>特色服务</span></li>
                    <li><i class="iconfont iconweibiaoti-4"></i><span>急速送达</span></li>
                </ul>

            </div>
            <div class="statement">
                <div class="center">
                    <div class="left">
                        <div class="logo ">
                            <a href="../index/index.html">
                                <img width="140px"
                                    src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png">
                            </a>
                        </div>
                        <p>本网站只用作学习,演示使用,不做其他用途。</p>
                        <p>网站中的商品均为虚拟商品，不做真实出售。请勿付款!</p>
                        <p style="margin-top: 20px;">©Second you buy, powered by 苗文青 2021.</p>
                    </div>
                    <div class="right">
                        <h1>相关链接</h1>
                        <a target="_blank" href="https://www.iconfont.cn/">iconfont</a>
                        <a target="_blank" href="https://element.eleme.cn/#/zh-CN">ElementUI</a>
                        <a target="_blank" href="https://cn.vuejs.org/">Vue</a>
                        <a target="_blank" href="https://shop.vivo.com.cn/">VIVO</a>
                        <a target="_blank" href="https://animate.style/">Animate</a>
                        <a target="_blank" href="https://www.xiaomiyoupin.com/">小米有品</a>
                    </div>
                </div>


            </div>



        </footer>
        <!-- 侧边栏 -->
        <el-backtop :bottom="100">
            <div class="sidebar">
                <ul>
                    <li>
                        <el-tooltip class="item" effect="dark" content="返回顶部" placement="left">
                            <i class="iconfont iconjiantoushang1"></i>
                        </el-tooltip>
                    </li>
                </ul>
            </div>
        </el-backtop>
    </div>
</body>
<script>
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: '../../public/img/error.png',
        loading: '../../public/img/loading.png',
        attempt: 1
    })
    const baseUrl = 'http://182.92,221.225:8888'
    var app = new Vue({
        el: '#app',
        data: {
            userInfo: {
                cusAvatar: "",
                cusGender: '',
                cusId: '',
                cusNickname: "",
                cusPasswd: null,
                cusTel: "",
            }, //用户信息
            logoUrl: 'https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png',
            isLogin: false,
            categoryIndex: 0,
            isShow: false, //是否显示左侧menu
            searchKey: '', //搜索关键字
            categoryBg: [
                "#ebf1f7",
                "#ebf1f6",
                "#eaf6f6",
                "#eaebf5",
                "#ebf1f6",
                "#f1eaf7",
                "#eaf6f7",
                "#fdf3dd",
                "#d8f0fc"
            ],
            category: [],
            recProList: [],
            redProList: [],
            carouseList: [],

        },

        mounted() {
            this.checkLogin();
            this.getData()
        },
        methods: {
            //检查登录
            checkLogin() {
                const userInfo = sessionStorage.getItem("userInfo")
                if (null === userInfo) {
                    this.isLogin = false
                } else {
                    this.isLogin = true
                    this.userInfo = JSON.parse(userInfo)
                }
            },
            mouseHandel(index) {
                this.isShow = true
                this.categoryIndex = index
            },
            getData() {
                axios.get(baseUrl + "/common/index/category").then((res) => {
                    if (res.data.code == 2000) {
                        this.category = res.data.data;
                    } else {}
                });
                axios.get(baseUrl + "/common/recommend/getRecPro").then((res) => {
                    if (res.data.code == 2000) {
                        this.recProList = res.data.data;
                    } else {}
                });
                axios.get(baseUrl + "/common/reduction/getRedPro").then((res) => {
                    if (res.data.code == 2000) {
                        this.redProList = res.data.data;
                    } else {}
                });
                axios.get(baseUrl + "/common/carouse/all").then((res) => {
                    if (res.data.code == 2000) {
                        this.carouseList = res.data.data;
                    } else {}
                });

            },

            gotoPersional() {
                window.location.href = '../personal/personal.html';
            },
            //退出登录
            logout() {
                sessionStorage.removeItem("userInfo")
                window.location.href = '../index/index.html';
            },
            getoCar() {
                window.open('_blank').location = '../car/car.html'
            },
            //输入框回车搜索
            toSearch() {
                var tempwindow = window.open('_blank');

                tempwindow.location = '../search/search.html?' + encodeURI('wd=' + this.searchKey + '&type=2');
            },
            //输入框回车搜索
            toSearchClass(classID) {
                var tempwindow = window.open('_blank');

                tempwindow.location = '../search/search.html?' + encodeURI('wd=' + classID + '&type=1');
            },

            //去商品详情页
            toProInfo(pid) {
                var tempwindow = window.open('_blank');
                tempwindow.location = '../product/product.html?' + encodeURI('pid=' + pid);
            }
        },

    })
</script>





</html>